<template>
	<view>
		<view class="save" @click="save">
			保存
		</view>
		<view class="context">
			<view class="common-info">
				<view class="title">
					基本资料
				</view>
				<view class="username" @click="cannotUpdate('用户名')">
					<text class="label">用户名</text>
					<text class="context">{{user.username}}</text>
				</view>
				<view class="nickname">
					<text class="label">昵称</text>
					<!-- <text class="context">{{user.nickname}}</text> -->
					<input class="context" type="text"maxlength="10"
					 v-model="user.nickname" />
				</view>
				<view class="summary">
					<text class="label">一句话介绍自己<text v-show="showSummarylen" style="padding-left: 20rpx;"> ({{user.summary.length}}/30)</text></text>
					<!-- <text class="context">{{user.summary}}</text> -->
					<input class="context" type="text" @focus="showSummarylen=true" @blur="showSummarylen=false" maxlength="30"
					 v-model="user.summary" />
				</view>
				<view class="gender">
					<text class="label">性别</text>
					<!-- <text class="context">{{user.gender === 0 ? '男' : '女'}}</text> -->
					<picker mode="selector" :range="genderRange" @change="genderChange" :value="user.gender" range-key="label">
						<view class="content">
							{{genderRange[user.gender].label}}
						</view>
					</picker>
				</view>
			</view>
			<view class="security">
				<view class="title">
					账号安全
					<text style="padding-left: 20rpx;font-size: 24rpx; color: #222222; font-weight: 100;">（仅自己可见）</text>
				</view>
				<view class="phone" @click="cannotUpdate('手机号')">
					<text class="label">手机号</text>
					<text class="context">{{user.phone}}</text>
				</view>
				<view class="password" @tap="toChangePassword">
					<text class="label">密码</text>
					<text class="context">*******</text>
				</view>
				<view class="email" @click="cannotUpdate('邮箱地址')">
					<text class="label">邮箱</text>
					<text class="context">{{user.email}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				showSummarylen: false,
				showNicknameLen: false,
				genderRange: [{
						value: 0,
						label: '男'
					},
					{
						value: 1,
						label: '女'
					}
				]
			};
		},
		methods: {
			init() {
				var that = this
				uni.getStorage({
					key: 'user-obj',
					success: res => {
						that.user = res.data
					}
				})
			},
			// 跳转到修改密码页面
			toChangePassword(){
				uni.navigateTo({
					url: '../change-pwd/change-pwd',
					animationType: 'slide-in-left'
				})
			},
			save() {
				var that = this
				var shouldModify = false
				var res = uni.getStorageSync('user-obj')
				let nickname = res.nickname
				let summary = res.summary
				let gender = res.gender
				console.log("pageData:" , that.user)
				console.log("storageData:",res)
				console.log(nickname === that.user.nickname, summary===that.user.summary, gender===that.user.gender)
				shouldModify = !((nickname === that.user.nickname) & (summary === that.user.summary) & (gender === that.user.gender))
				console.log(shouldModify)
				if (shouldModify) {
					uni.setStorage({
						key: 'user-obj',
						data: that.user,
						success() {
							uni.showToast({
								title: '保存成功',
								icon: 'none',
								position: 'top'
							})
						}
					})
				} else {
					uni.showToast({
						title: '你没有修改任何东西',
						icon: 'none',
						position: 'top'
					})
				}
			},
			genderChange(value) {
				this.user.gender = value.detail.value
			},
			cannotUpdate(value) {
				uni.showToast({
					title: value + ' 不能修改',
					icon: 'none'
				})
			}
		},
		onLoad() {
			this.init()
		}
	}
</script>

<style lang="scss">
	
	.save {
		position: fixed;
		// #ifdef H5
		top: 30rpx;
		// #endif
		// #ifdef MP-WEIXIN
		top: 30rpx;
		// #endif
		z-index: 9999;
		right: 30rpx;
		background-color: $color1;
		padding: 10rpx 35rpx;
		color: white;
		font-size: $uni-font-size-base;
		border-radius: 40rpx;
	}
	

	.context {
		padding: 30rpx;

		.common-info {
			.title {
				padding: 30rpx 0;
				padding-top: 10rpx;
				font-size: $uni-font-size-lg;
				font-weight: 600;
				border: none;
			}

			view {
				padding: 30rpx 0;
				border-bottom: solid 1rpx #e6e6e6;

				.label {
					color: $uni-text-color-placeholder;
					font-size: $uni-font-size-base;
					display: inline-block;
					width: 145rpx;
				}

				.context {
					padding: 0;
					margin: 0;
					display: inline-block;
					font-size: $uni-font-size-base;
				}
			}

			.username {
				.context {
					color: $uni-text-color-disable;
				}
			}

			.summary {
				.label {
					color: $uni-text-color-placeholder;
					font-size: $uni-font-size-base;
					display: block;
					padding: 0;
					padding-right: 10rpx;
					width: 70%;
				}

				.context {
					display: block;
					padding: 0;
					font-size: $uni-font-size-sm;
					padding-top: 30rpx;
				}
			}

			.gender {
				display: flex;
				flex-direction: row;

				picker {
					padding: 0;
					margin: 0;

					view {
						padding: 0;
						margin: 0;
						font-size: $uni-font-size-base;
					}
				}
			}
		}

		.security {
			.title {
				padding: 30rpx 0;
				padding-top: 80rpx;
				font-size: $uni-font-size-lg;
				font-weight: 600;
				border: none;
			}

			view {
				padding: 30rpx 0;
				border-bottom: solid 1rpx #e6e6e6;

				.label {
					color: $uni-text-color-placeholder;
					font-size: $uni-font-size-base;
					display: inline-block;
					width: 145rpx;
				}

				.context {
					padding: 0;
					margin: 0;
					display: inline-block;
					font-size: $uni-font-size-base;
				}
			}
		}
	}
</style>
